iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
5
自我挑戰組

【I Love Vue】 30天愛上 Vue系列 第 4

【I Love Vue 】 Day 04 愛上 Vue- 環境建置(三) - Vue專案建置

  • 分享至 

  • xImage
  •  

相信有很多文章在介紹Vue的時候都會把奉上各式比較的圖表供各位看官參考,
這樣的方式能讓大家快速理解各種框架的優缺點,
讓開發人員更方便選擇適合自己的工具。

我們這個系列會把這些Vue的開發特點放在往後實際在開發篇章中,
讓各位看官能在學習的過程中慢慢了解各種開發方式。

包含:

  1. 甚麼是SPA形式的網頁
  2. 甚麼是MVVM的開發架構
    (有興趣的看官,不仿可以先做個筆記)

Vue 專案建置

這邊我們會開始介紹幾個簡單的指令,讓大家看起來越來越有工程師的格調。

  • CD : 切換目前所在的位置(資料夾)
  • mkdir : 建立目錄(資料夾)
  • vue create [專案名稱] : 建立一個專案
  • npm run serve : 啟動服務 (會執行目前所在資料夾底下的專案)
  1. 首先開啟你的VSCode

  2. 在Terminal的地方會看到路徑(Path)
    (這邊的路徑(Path),就像是地址一樣是用來標示你現在所在的位置。)
    https://ithelp.ithome.com.tw/upload/images/20200918/201159415BN9h6dW09.jpg

  3. 在Terminal上輸入 cd /

$ cd /

(若在安裝的步驟相同時,會如下圖一樣切換到C槽的位置)
https://ithelp.ithome.com.tw/upload/images/20200918/20115941yMC2NZnn0W.jpg

  1. 接著輸入 mkdir vueProject
$ mkdir vueProject

(此時會在 C槽底下建立一個 vueProject 的資料夾)
https://ithelp.ithome.com.tw/upload/images/20200918/20115941Y53VPQzSWy.jpg

這時候可以到你電腦中的C槽,會發現多了一個vueProject的資料夾。
其實,這兩步驟的效力等同於你跑到C槽 -> 右鍵 -> 新增資料夾 -> 改名 vueProject
https://ithelp.ithome.com.tw/upload/images/20200918/20115941Eorgo46YiM.jpg

  1. 我們接著輸入 cd vueProject
$ cd vueProject

(切換到 vueProject 資料夾裡面)
https://ithelp.ithome.com.tw/upload/images/20200918/20115941KClbJKOTCH.jpg

  1. 最後我們再輸入 vue create myvueproject(專案名稱 必須小寫)
$ vue create myvueproject
  1. 之後輸入 Y
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941VXTq8uiWTg.jpg

  2. 按鍵盤上的上下鍵 選擇 Default (Vue 3 Preview)
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941CmtUlm1xKy.jpg

  3. 看到這個畫面之後,就表示創建完成囉
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941zY10ODctIn.jpg

10.最後我們跟著輸入上面建議的兩行指令看看我們的畫面吧

$ cd myvueproject // 切換到 myvueproject 資料夾 
$ npm run serve // 啟動服務 (執行我們的程式) 
  1. 出現這個畫面時,按下Ctr + 左鍵 點 下超連結(兩個都可以)
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941WFkb29Br8L.jpg

  2. 恭喜你開始了第一個Vue專案
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941PpmfZx0xQe.jpg

中文化界面

有些小夥伴看到英文介面就感到反感,所以在正式開始介紹我們VSCode的其他功能之前。
先來教大家如何中文化我們的VSCode。

  1. 點選左邊四個方塊的圖示(Extensions)

  2. 輸入 Chinese(Traditional)

  3. 按下 install
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941DHdceQfcuE.jpg

  4. 重新開啟VSCode (或是直接按下 Restart Now)
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941N58I9TtA3o.jpg

  5. 重新啟動後就會出現非常親民的繁體中文的介面了
    https://ithelp.ithome.com.tw/upload/images/20200918/20115941P9eoLeO9fL.jpg


結語

本篇中所有在 VSCode 下的指令,我們都可以在CMD(命令提示字元)上完成,
但在未來我們撰寫程式時,又必須額外再開啟CMD來操作會對開發人員造成不小的負擔(就是嫌麻煩)。

所以在本篇我們看到了VSCode 有以下特點:

  • 輕量化的IDE (就是甚麼都沒有,但下載快)
  • 擁有很高的延展性 (可以自己找擴充元件)
  • 整合了Terminal (今天那些打指令的地方)

其實VSCode還有其他的特點,我們之後遇到的時候再幫大家做介紹。

下一篇我們會介紹:

  • IDE的操作
  • 建立對開發者友善的開發環境(套件介紹)

(預計下一篇也是環境建置的最後一篇)


上一篇
【I Love Vue 】 Day 03 愛上 Vue- 環境建置(二) - Vue CLI
下一篇
【I Love Vue 】 Day 05 愛上 Vue- 環境建置(四) - 聰明的VSCode
系列文
【I Love Vue】 30天愛上 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言